<template>
<!-- 插值指令:将此处显示的文本与响应式变量的值进行绑定-->
<!-- -->
  <span>{{info}}</span>
  <p>{{info}}</p>
  <h1>{{info}}</h1>
  <hr>
<!--  相当于JS元素对象中的innerText和innerHTML的区别-->
  <p v-text="info"></p>
  <p v-html="info"></p>
  <button @click="f">点我修改</button>
  <hr>
<!--  响应式变量的值也可以拼接-->
  {{ info + '周末愉快'}}
</template>
<!--setup是script的语法糖,必须写-->
<script setup>
import {ref} from "vue";
// 定义响应式变量(对象),必须引入,这里相当于是给info的value属性设置成'我是A页面的变量info'
const info = ref('我是A页面的变量info');
const f = () => {
  info.value = '值<b>改变了</b>!'
}
</script>
<!--scoped是style的语法糖,必须写-->
<style scoped>

</style>